<script setup>
import BackIcon from "./icons/IconBack.vue";
const props = defineProps({
  title: String,
  goback_seen: {
    type: String,
    default: "false",
  },
});
</script>
<script>
export default {
  methods: {
    goback() {
      this.$router.back();
    },
  },
};
</script>
<template>
  <div class="top">
    <div class="backbutton" v-if="goback_seen == 'true'" @click="goback">
      <BackIcon />
    </div>
    <div class="title">{{ props.title }}</div>
  </div>
</template>
<style scoped>
.top {
  position: fixed;
  background-color: #ffffff;
  /* border: 1px solid rgb(0, 0, 0); */
  top: 0px;
  left: 0%;
  width: 100%;
  height: 88px;
  z-index: 5;
}
.backbutton {
  position: absolute;
  left: 0%;
  right: 69.23%;
  top: 50%;
  bottom: 0%;

  mix-blend-mode: normal;
  opacity: 0.8;
}
.title {
  position: absolute;
  text-align: center;
  color: rgb(0, 0, 0);

  bottom: 10px;
  left: calc(50% - 34px / 2);
  top: calc(50% - 24px / 2 + 22px);

  margin: 0 auto;
  line-height: 24px;
  font-size: 17px;
}
svg {
  position: absolute;
  width: 12px;
  height: 24px;
  left: 16px;
  top: calc(50% - 24px / 2);
}
</style>
